<template>
  <div>
    <!-- views/VFor.vue -->
    <h2>v-for指令的应用</h2>
    <div>
        <p v-for="(item, i) in foods" :key="item.id">
            {{i+1}}. 
            亮哥喜欢吃“{{item.name}}”，
            ￥{{item.price}}一份，
            手里拿了
            <button 
                :disabled="item.count<=1" 
                @click="item.count--">-</button>
            {{item.count}}
            <button @click="item.count++">+</button>
            份
        </p>
        <div> 一共花了：<b>￥{{getTotal()}}</b> </div>
        <div> 一共花了：<b>￥{{total}}</b> </div>
    </div>
    <hr>

    <!-- v-for 遍历字符串数组 -->
    <p v-for="item in movies" :key="item">
        亮哥喜欢看：《{{item}}》
    </p>

    <hr>
    <!-- v-for 重复输出固定数量的dom元素：针对数字进行遍历 -->
    <div>
        <p v-for="item in 3" :key="item">
            {{item}}. 亮亮说，小新和非洲女朋友分手了！
        </p>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            foods: [
                {id:1, name:'臭豆腐', price:15.5, count:2},
                {id:2, name:'鲱鱼罐头', price:65.5, count:3},
                {id:3, name:'毛鸡蛋', price:5.5, count:4},
                {id:4, name:'大号榴莲', price:155.5, count:5}
            ],
            movies: ['煎饼的故事', '小新与单杠', 
                     '我的非洲女友', '煎饼的故事(2022)']
        }
    },
    methods: {
        getTotal() {
           let sum = 0;
           this.foods.forEach(item=>{
            sum += item.price * item.count
           }) 
           return sum;
        }
    },
    computed: {  
        total() {  // 声明计算属性，属性名：total
           let sum = 0;
           this.foods.forEach(item=>{
            sum += item.price * item.count
           }) 
           return sum;
        }
    },
};
</script>

<style lang="scss" scoped></style>
